<template>
  <div :id="id" :style="{ height:height,width:width }" />
</template>

<script>
import echarts from "echarts";
import { getMapData } from "@/api/regionalHotspot.js";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "600px",
    },
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.getChinaMap();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart = null;
  },
  methods: {
    initChart(id, opt) {
      console.log(this)
      var chart = echarts.init(document.getElementById(id));
      var cityMap = {
        中国: "zhongguo",
        上海: "shanghai",
        河北: "hebei",
        山西: "shangxi",
        内蒙古: "neimenggu",
        辽宁: "liaoning",
        吉林: "jilin",
        黑龙江: "heilongjiang",
        江苏: "jiangsu",
        浙江: "zhejiang",
        安徽: "anhui",
        福建: "fujian",
        江西: "jiangxi",
        山东: "shangdong",
        河南: "henan",
        湖北: "hubei",
        湖南: "hunan",
        广东: "guangdong",
        广西: "guangxi",
        海南: "hainan",
        四川: "sichuan",
        贵州: "guizhou",
        云南: "yunnan",
        西藏: "xizang",
        陕西: "shanxi",
        甘肃: "gansu",
        青海: "qinghai",
        宁夏: "ningxia",
        新疆: "xinjiang",
        北京: "beijing",
        天津: "tianjin",
        重庆: "chongqing",
        香港: "xianggang",
        澳门: "aomen",
      };
      var curGeoJson = {};
      var defaultOpt = {
        mapName: "china", // 地图展示
        goDown: false, // 是否下钻
        bgColor: "#404a59", // 画布背景色
        activeArea: [], // 区域高亮,同echarts配置项
        data: [],
        // 下钻回调(点击的地图名、实例对象option、实例对象)
        callback: function (name, option, instance) {},
      };
      if (opt) opt = echarts.util.extend(defaultOpt, opt);
      // 层级索引
      var name = [opt.mapName];
      var idx = 0;
      var pos = {
        leftPlus: 115,
        leftCur: 150,
        left: 198,
        top: 50,
      };

      var line = [
        [0, 0],
        [8, 11],
        [0, 22],
      ];
      // style
      var style = {
        font: '18px "Microsoft YaHei", sans-serif',
        textColor: "#000",
        lineColor: "rgba(0, 0, 0, .8)",
      };
      var handleEvents = {
        /**
         * i 实例对象
         * o option
         * n 地图名
         **/
        resetOption: function (i, o, n) {
          var breadcrumb = this.createBreadcrumb(n);
          var j = name.indexOf(n);
          var l = o.graphic.length;
          if (j < 0) {
            o.graphic.push(breadcrumb);
            o.graphic[0].children[0].shape.x2 = 145;
            o.graphic[0].children[1].shape.x2 = 145;
            if (o.graphic.length > 2) {
              var cityData = [];
              var cityJson;
              for (var x = 0; x < opt.data.length; x++) {
                if (n === opt.data[x].city) {
                  $([opt.data[x]]).each(function (index, data) {
                    cityJson = {
                      city: data.city,
                      name: data.name,
                      value: data.value,
                      crew: data.crew,
                      company: data.company,
                      position: data.position,
                      region: data.region,
                    };
                    cityData.push(cityJson);
                  });
                }
              }

              if (cityData != null) {
                o.series[0].data = handleEvents.initSeriesData(cityData);
              } else {
                o.series[0].data = [];
              }
            }
            name.push(n);
            idx++;
          } else {
            o.graphic.splice(j + 2, l);
            if (o.graphic.length <= 2) {
              o.graphic[0].children[0].shape.x2 = 60;
              o.graphic[0].children[1].shape.x2 = 60;
              o.series[0].data = handleEvents.initSeriesData(opt.data);
            }
            name.splice(j + 1, l);
            idx = j;
            pos.leftCur -= pos.leftPlus * (l - j - 1);
          }

          o.geo.map = n;
          o.geo.zoom = 0.4;
          i.clear();
          i.setOption(o);
          this.zoomAnimation();
          opt.callback(n, o, i);
        },

        /**
         * name 地图名
         **/
        createBreadcrumb: function (name) {
          var cityToPinyin = {
            中国: "zhongguo",
            上海: "shanghai",
            河北: "hebei",
            山西: "shangxi",
            内蒙古: "neimenggu",
            辽宁: "liaoning",
            吉林: "jilin",
            黑龙江: "heilongjiang",
            江苏: "jiangsu",
            浙江: "zhejiang",
            安徽: "anhui",
            福建: "fujian",
            江西: "jiangxi",
            山东: "shangdong",
            河南: "henan",
            湖北: "hubei",
            湖南: "hunan",
            广东: "guangdong",
            广西: "guangxi",
            海南: "hainan",
            四川: "sichuan",
            贵州: "guizhou",
            云南: "yunnan",
            西藏: "xizang",
            陕西: "shanxi",
            甘肃: "gansu",
            青海: "qinghai",
            宁夏: "ningxia",
            新疆: "xinjiang",
            北京: "beijing",
            天津: "tianjin",
            重庆: "chongqing",
            香港: "xianggang",
            澳门: "aomen",
          };
          var breadcrumb = {
            type: "group",
            id: name,
            children: [ 
            ],
          };
          return breadcrumb;
        },

        // 设置effectscatter
        initSeriesData: function (data) {
          var temp = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              temp.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
                crew: data[i].crew,
                company: data[i].company,
                position: data[i].position,
                region: data[i].region,
              });
            }
          }
          return temp;
        },
        zoomAnimation: function () {
          var count = null;
          var zoom = function (per) {
            if (!count) count = per;
            count = count + per;
            // console.log(per,count);
            chart.setOption({
              geo: {
                zoom: count,
              },
            });
            if (count < 1)
              window.requestAnimationFrame(function () {
                zoom(0.2);
              });
          };
          window.requestAnimationFrame(function () {
            zoom(0.2);
          });
        },
      };
      var option = {
        backgroundColor: opt.bgColor,
        graphic: [
          {
            type: "group",
            left: pos.left,
            top: pos.top - 4,
            children: [
              {
                type: "line",
                left: 0,
                top: -20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 60,
                  y2: 0,
                },
                style: {
                  
                },
              },
              {
                type: "line",
                left: 0,
                top: 20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 60,
                  y2: 0,
                },
                style: {
                 
                },
              },
            ],
          },
          {
            id: name[idx],
            type: "group",
            left: pos.left + 2,
            top: pos.top,
            children: [
              {
                type: "text",
                left: 0,
                top: "middle",
                style: {
                  text: "返回",
                  textAlign: "center",
                  fill: style.textColor,
                  font: style.font,
                },
                onclick: function () {
                  handleEvents.resetOption(chart, option, "中国");
                },
              }
            ],
          },
        ],
        geo: {
          map: opt.mapName,
          roam: true,
          zoom: 1,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(255, 255, 255, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#afcffe", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#afcffe", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
            emphasis: {
              areaColor: "#0777ff",
              borderWidth: 0,
            },
          },
          // regions: opt.activeArea.map(function (item) {
          //   if (typeof item !== "string") {
          //     return {
          //       name: item.name,
          //       itemStyle: {
          //         normal: {
          //           areaColor: item.areaColor || "#389BB7",
          //         },
          //       },
          //       label: {
          //         normal: {
          //           show: item.showLabel,
          //           textStyle: {
          //             color: "#fff",
          //           },
          //         },
          //       },
          //     };
          //   } else {
          //     return {
          //       name: item,
          //       itemStyle: {
          //         normal: {
          //           borderColor: "#91e6ff",
          //           areaColor: "#389BB7",
          //         },
          //       },
          //     };
          //   }
          // }),
          regions: [
            {
              name: "广东",
              itemStyle: {
                areaColor: "#c1d9ff",
              },
            },
            {
              name: "新疆",
              itemStyle: {
                areaColor: "#afcffe",
              },
            },
            {
              name: "西藏",
              itemStyle: {
                areaColor: "#aadcff",
              },
            },
            {
              name: "青海",
              itemStyle: {
                areaColor: "#c2e6ff",
              },
            },
            {
              name: "甘肃",
              itemStyle: {
                areaColor: "#c1d9ff",
              },
            },
            {
              name: "四川",
              itemStyle: {
                areaColor: "#ccccfe",
              },
            },
            {
              name: "云南",
              itemStyle: {
                areaColor: "#c1d9ff",
              },
            },
            {
              name: "宁夏",
              itemStyle: {
                areaColor: "#afcffe",
              },
            },
            {
              name: "内蒙古",
              itemStyle: {
                areaColor: "#ccccfe",
              },
            },
            {
              name: "陕西",
              itemStyle: {
                areaColor: "#c2e6ff",
              },
            },
            {
              name: "重庆",
              itemStyle: {
                areaColor: "#c2d8fe",
              },
            },
            {
              name: "贵州",
              itemStyle: {
                areaColor: "#aadcff",
              },
            },
            {
              name: "山西",
              itemStyle: {
                areaColor: "#c1d9fe",
              },
            },
            {
              name: "河南",
              itemStyle: {
                areaColor: "#a0cbfe",
              },
            },
            {
              name: "湖北",
              itemStyle: {
                areaColor: "#ccccfe",
              },
            },
            {
              name: "湖南",
              itemStyle: {
                areaColor: "#afcffe",
              },
            },
            {
              name: "广西",
              itemStyle: {
                areaColor: "#96dfff",
              },
            },
            {
              name: "广东",
              itemStyle: {
                areaColor: "#c1d9ff",
              },
            },
            {
              name: "香港",
              itemStyle: {
                areaColor: "#c1d9ff",
              },
            },
            {
              name: "澳门",
              itemStyle: {
                areaColor: "#c1d9ff",
              },
            },
            {
              name: "江西",
              itemStyle: {
                areaColor: "#96dfff",
              },
            },
            {
              name: "安徽",
              itemStyle: {
                areaColor: "#c2e6ff",
              },
            },
            {
              name: "山东",
              itemStyle: {
                areaColor: "#c1d9ff",
              },
            },
            {
              name: "河北",
              itemStyle: {
                areaColor: "#c2e6ff",
              },
            },
            {
              name: "北京",
              itemStyle: {
                areaColor: "#c1d8fe",
              },
            },
            {
              name: "天津",
              itemStyle: {
                areaColor: "#cccdfd",
              },
            },
            {
              name: "黑龙江",
              itemStyle: {
                areaColor: "#aadcff",
              },
            },
            {
              name: "吉林",
              itemStyle: {
                areaColor: "#a0cbfe",
              },
            },
            {
              name: "辽宁",
              itemStyle: {
                areaColor: "#c1d9ff",
              },
            },
            {
              name: "江苏",
              itemStyle: {
                areaColor: "#aadbfe",
              },
            },
            {
              name: "浙江",
              itemStyle: {
                areaColor: "#c1d9ff",
              },
            },
            {
              name: "上海",
              itemStyle: {
                areaColor: "#c1d8fe",
              },
            },
            {
              name: "福建",
              itemStyle: {
                areaColor: "#cbccfe",
              },
            },
            {
              name: "台湾",
              itemStyle: {
                areaColor: "#aecffe",
              },
            },
            {
              name: "海南",
              itemStyle: {
                areaColor: "#c0d8fe",
              },
            },
          ],
        },
        series: [{
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            rippleEffect: {
                period:15,
                scale: 4,
                brushType: 'fill'
            },
            hoverAnimation: true,
            itemStyle: {
                normal: {
                    color: '#FFC848',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: handleEvents.initSeriesData(opt.data)
        }]
      };
      chart.setOption(option);
      // 添加事件
      let _this = this
      chart.on("click", function (params) {
        console.log(_this)
        var _self = this;
        if (opt.goDown && params.name !== name[idx]) {
          if (cityMap[params.name]) {
            var url = cityMap[params.name];
            getMapData(url)
              .then((res) => {
                curGeoJson = res;
                echarts.registerMap(params.name, res);
                handleEvents.resetOption(_self, option, params.name);
              })
              .catch((err) => {});
          }
        }
      });
    },
    getChinaMap() {
      getMapData("zhongguo")
        .then((res) => {
          console.log(res);
          echarts.registerMap("中国", res);
          var myChart = this.initChart(this.id, {
            bgColor: "", // 画布背景色
            mapName: "中国", // 地图名
            goDown: true, // 是否下钻
            // 下钻回调
            callback: function (name, option, instance) {
              //console.log(name, option, instance);
            },
          });
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="stylus" scoped></style>